<template>
  <div class="box section clearfix">
    <el-form :inline="true" style="text-align: left" ref="query" :model="query">
      <el-row class="query">
        <el-form-item label="关键词：" prop="keyWord">
          <el-input
            placeholder="姓名、身份证号"
            v-model="query.keyword"
          ></el-input>
        </el-form-item>
        <el-form-item class="btn">
          <el-button type="danger" @click="clearFun" v-no-more-click
          >清空
          </el-button
          >
          <el-button type="primary" @click="queryFun" v-no-more-click
          >搜索
          </el-button
          >
        </el-form-item>
      </el-row>
    </el-form>
    <el-table :data="tableData" border stripe style="width: 100%">
      <el-table-column
        prop="contractNo"
        label="合同编号"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="customer"
        label="姓名"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="idNumber"
        label="身份证号"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="contractName"
        label="合同名称"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="chargeMoney"
        label="签约金额（万元）"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="overStatus"
        label="签约状态"
        align="center"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="{row}">
          <span>{{ row.overStatus ? "已签约" : "未签约" }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="updateTime"
        label="签约日期"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="agreeName"
        label="同意人"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column fixed="right" label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="toView(scope.row,1)"
            v-no-more-click
          >查看身份证
          </el-button
          >
          <el-button
            type="text"
            size="small"
            @click="toView(scope.row,3)"
            v-no-more-click
          >查看视频
          </el-button>
          <el-button
            type="text"
            size="small"
            @click="toView(scope.row,2)"
            v-no-more-click
          >查看签名
          </el-button>
          <el-button
            type="text"
            size="small"
            @click="downloadFun(scope.row)"
            style="color: #28B779"
            v-no-more-click
          >下载合同
          </el-button>

        </template>
      </el-table-column>
    </el-table>
    <!--分页控件-->
    <div class="pagination">
      <span class="title">小计：共{{ this.total }}条数据</span>
      <el-pagination
        background
        layout="total,prev, pager, next, sizes"
        :total="total"
        :page-size="query.pageSize"
        :current-page.sync="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
<!--    <video  src="https://file.xssbdc.com/static/signApp/video/dev/df06b0efa17a4a0d8d0f38000e5d9018.mp4"></video>-->
    <el-dialog
      title="查看附件"
      :visible.sync="show"
      :before-close="handleClose"
      append-to-body
      width="50%"
      top="30px"
      style="text-align: center"
    >
      <video  class="video-c" controls v-if="type==3" :src="resUrl"></video>
      <img class="video-c" v-else  :src="resUrl">

    </el-dialog>
  </div>
</template>

<script>
import {
  signAppContract,
  getViewFile
} from "../../../src/assets/js/api";

export default {
  name: "OnlineContract",
  data() {
    return {
      query: {
        pageSize: 10,
        pageNo: 1,
        keyword: null
      },
      total: 10,
      pages: 0,
      currentPage: 1,
      tableData: [],
      show:false,
      type:0,
      resUrl:'',
    };
  },
  created() {
    this.getList();
  },
  methods: {
    //下载合同

    downloadFun(row){

      let xhr=new XMLHttpRequest();
      xhr.open('get',row.contractUrl);
      xhr.responseType = 'blob'; //设置请求回来的数据为blob方式
      xhr.onload = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
          console.log(xhr.response)
          // return;
          // 数据在 xhr.response 保存
          var blob = new Blob([xhr.response],{type:xhr.response.type});
          // 创建a链接 href链接地址 download为下载下来后文件的名称
          var link = document.createElement('a');
          link.href = URL.createObjectURL(blob);
          link.download =row.contractName;
          link.style.display = 'none'; //隐藏a标签 直接调用a标签的点击事件
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);

        }
      }
      xhr.send();
    },
  //查看  1身份证 ,2签名图片 3承诺视频
    toView(row,type) {
      getViewFile({
        orderNumber:row.orderNumber,
        type,
        id:type==1?'':row.id
      }).then(res=>{
        this.show=true;
        this.type=type;
        this.resUrl=res.data;
      })
    },
    //获取列表
    getList() {
      signAppContract(this.query).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.records;
          this.currentPage = res.data.current;
          this.total = res.data.total;
          this.pages = res.data.pages;
        }
      });
    },

    // 搜索按钮
    queryFun() {
      this.getList();
    },
    clearFun() {
      this.query.keyword = "";
      this.query.pageSize = 10;
      this.query.pageNo = 1;
    },
    //分页
    handleCurrentChange(cpage) {
      this.query.pageNo = cpage;
      this.getList();
    },
    handleSizeChange(psize) {
      this.query.pageSize = psize;
      this.getList();
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {
        });
    }
  }
};
</script>

<style scoped type="less">
::v-deep .el-table td {
  padding: 10px 0;
}

::v-deep .el-table th {
  padding: 10px 0;
}

.query ::v-deep .el-input__inner {
  height: 32px;
}

.query ::v-deep .el-input__icon {
  line-height: 32px;
}

.query ::v-deep .el-form-item {
  width: 320px;
}

.query ::v-deep .vue-treeselect__control {
  line-height: 30px;
  height: 32px;
}

.query ::v-deep .vue-treeselect__single-value,
.query ::v-deep .vue-treeselect__placeholder {
  line-height: 30px;
}

::v-deep .btn .el-button {
  width: 80px;
  height: 32px;
  line-height: 0;
}

::v-deep .el-table th > .cell {
  font-weight: bold;
  color: #333;
  font-size: 14px;
}

::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: rgba(59, 157, 248, 0.1);
}

.box {
  position: relative;
  background: #fff;
  padding: 20px 20px 50px 20px;
}

::v-deep .el-pagination {
  position: absolute;
  margin-top: 20px;
  right: 0;
}

::v-deep .el-pagination__total {
  visibility: hidden;
}

.title {
  position: absolute;
  left: 0;
  margin-top: 15px;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  line-height: 21px;
}
.video-c{
  width: 100%;
}
</style>
